<template>
  <div class="dialog-content">
    <p class="login-warning" v-show="errors.any() || isNouser">
      <!-- <span class="el-icon-warning" v-show="errors.has('电话号码')">&nbsp;&nbsp;</span>
      <span class="el-icon-warning" v-show="errors.has('验证码') && !errors.has('电话号码')">&nbsp;&nbsp;验证码为6位数字</span> -->
      <span class="el-icon-warning" v-show="isNouser" @click="$emit('im-registe')">&nbsp;&nbsp;该手机号尚未注册，请<a href="#">注册</a></span>
      <span class="el-icon-warning" v-if="errors.items.length > 0 && !isNouser">&nbsp;&nbsp;{{errors.items[0].msg}}</span>
    </p>
    <div class="dialog-input" :style="{marginTop: ((errors.any() || isNouser) ? 0 : 50) + 'px'}">
      <el-input placeholder="请输入电话号码"  v-model.trim="userName" v-validate.disable="'required|phone'" name="电话号码" @blur="valiUser()"></el-input>
    </div>
    <el-row class="diaglo-btn" :gutter="18">
      <el-col :span="12">
        <el-input placeholder="验证码" v-model.trim="smsCode" v-validate.disable="'required|zipCode'" type="text" name="验证码"></el-input>
      </el-col>
      <el-col :span="12">
        <el-button type="success width-full" plain round :disabled="(times !== 0 && times !== 60) || isNouser" @click="svc">
          <span v-show="times !== 60">{{times}}s</span>
          <span v-show="times === 60">发送验证码</span>
        </el-button>
      </el-col>
    </el-row>
    <el-button type="success width-full diaglo-btn" round  @click="login()" :loading="isLoad" :disabled="isNouser">{{isLoad ? '登录中，请稍等' : '登录'}}</el-button>
  </div>
</template>

<script>
import axios from 'axios'

  export default {
    title: '密码登录',
    name: 'sms-login',
    props: {
      loginVisible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        userName: '',
        smsCode: '',
        times: 60, // 验证吗计数其
        isNouser: false,
        isLoad: false
      }
    },
    mounted () {
      this.visible = this.loginVisible
    },
    methods: {
      handleClick () {},
      login () {
        this.$validator.validateAll().then(result => {
        if (result) {
          this.isLoad = true
          axios.post('/mscs/user/messageLogin', this.$paramsConvert({userName: this.userName, code: this.smsCode })).then((res) => {
            this.isLoad = false
            if (res.data.code === 1) {
              this.$store.commit('setUser', res.data.data)
              this.$emit('login-success')
              this.smsCode = ''
            } else {
              this.$codeError(res)
            }
          }).catch((error) => {
            this.isLoad = false
            this.$alert(`登陆失败，原因:${error.response.statusText}`)
          })

        }
      });
        // this.$emit('login-success')
      },
      svc () {
        // this.$validator.validateAll().then(result => {
          if (this.$validator.errors.has('电话号码')) {
            this.$message({
              showClose: true,
              message: '电话号码错误，查证后重新获取验证码',
              // message: this.$connErmsg(this.$validator.errors.items),
              type: 'error'
            })
          } else {
            axios.post('/mscs/user/sendSMSVerifyCode', this.$paramsConvert({userName: this.userName, type: 'LOGIN' })).then((res) => {
              if (res.data.code !== 1) {
                this.$codeError(res)
              }
            }).catch((error) => {
              this.$message({
                showClose: true,
                message: '获取验证码错误，建议使用账户密码登录',
                type: 'error'
              })
            })
            this.countdown()
          }
        // }).catch((e) => {})

      },
      countdown () {
        let int = setInterval(() => {
          this.times--
          if (this.times === 0) {
            window.clearInterval(int)
            this.times = 60
          }
        }, 1000)
      },
      valiUser () {
        this.$validator.validate('电话号码').then(result => {
          if (result) {
            axios.get(`/mscs/user/findUserByUsername?userName=${this.userName}`).then((res) => {
              if (res.data.data === '当前用户不存在') {
                this.isNouser = true
              } else if (res.data.code === 1) {
                this.isNouser = false
              }
            })
          }
        })
      },
    },
    watch: {
      'loginVisible' (val) {
        this.visible = this.loginVisible
      },
      'visible' (val) {
        if (!val) {
          this.$emit('update:loginVisible', false)
        }
      }
    }
  }
</script>
<style>
  .login .el-tabs__nav{
    width: 100%;
  }
  .login .el-tabs__active-bar {
    height: 0;
  }
  .login-warning {
    background: #F6EBEA;
    color: #C05A5A;
    text-align: left;
    margin: 0;
    padding: 9px 50px;
    margin: 0 -50px;
    margin-bottom: 8px;
  }
  .login-warning a {
    color: #C05A5A;
  }
  .login .el-tabs__header {
    position: static;
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
  }
  .login .el-tabs__item{
    font-size: 18px;
  }
  /* .login #tab-first {
    border-right: 1px solid #BFBFBF;
  } */
  .login .el-tabs__nav-wrap::after {
    height: 0;
  }
  .login .el-tabs__nav-wrap {
    position: static;
  }
  .login .el-tabs__item:hover {
    color: #94C05A;
  }
  .login .el-tabs__item.is-active {
    color: #94C05A;
  }
  /* 密码登陆底部功能 */
  .login-func, .login-func .el-button{
    color: #497D03;
  }
  .login-func button {
    padding: 0;
  }
</style>
